<template>
<div>
  <nav>
    <div class="return" @click="prev">
        <van-icon name="arrow-left"/>
        返回
    </div>
    <div class="mine"><slot></slot></div>
    <div class="more">
      <van-icon name="ellipsis" @click="showShare = true" />
      <van-share-sheet
          v-model="showShare"
          title="立即分享给好友"
          :options="options"
          @select="onSelect"
      />
    </div>
  </nav>
</div>
</template>

<script>

import {Toast} from "vant";

export default {
name: "MyNav",
 data(){
  return{
    //弹出层
    show: false,
    //  分享
    showShare: false,
    options: [
      { name: '微信', icon: 'wechat' },
      { name: '微博', icon: 'weibo' },
      { name: '复制链接', icon: 'link' },
      { name: '分享海报', icon: 'poster' },
      { name: '二维码', icon: 'qrcode' },
    ],
  }
 },
  methods:{
    //分享
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
  //  返回上一级
    prev(){
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped lang="less">
nav {
  display: flex;
  background-color: #67ABD6;
  border-bottom: 1px solid #fff;
  color: #fff;
  padding: 10px 0;
  .return {
    float: left;
  }
  .mine {
    flex-grow: 1;
    text-align: center;
    font-size: 20px;
  }
  .more {
    float: right;
    width: 53px;
    text-align: center;
  }
}

</style>